<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p><code>&lt;md-autocomplete&gt;</code> is a special input component with a drop-down of all possible matches to a
    custom query. This component allows you to provide real-time suggestions as the user types
    in the input area.</p>
<p>To start, you will need to specify the required parameters and provide a template for your
    results. The content inside <code>md-autocomplete</code> will be treated as a template.</p>
<p>In more complex cases, you may want to include other content such as a message to display when
    no matches were found.  You can do this by wrapping your template in <code>md-item-template</code> and
    adding a tag for <code>md-not-found</code>.  An example of this is shown below.</p>
<p>To reset the displayed value you must clear both values for <code>md-search-text</code> and <code>md-selected-item</code>.</p>
<h3 id="validation">Validation</h3>
<p>You can use <code>ng-messages</code> to include validation the same way that you would normally validate;
    however, if you want to replicate a standard input with a floating label, you will have to
    do the following:</p>
<ul>
<li>Make sure that your template is wrapped in <code>md-item-template</code></li>
<li>Add your <code>ng-messages</code> code inside of <code>md-autocomplete</code></li>
<li>Add your validation properties to <code>md-autocomplete</code> (ie. <code>required</code>)</li>
<li>Add a <code>name</code> to <code>md-autocomplete</code> (to be used on the generated <code>input</code>)</li>
</ul>
<p>There is an example below of how this should look.</p>
<h3 id="notes">Notes</h3>
<p>The <code>md-autocomplete</code> uses the the <a ng-href="api/directive/mdVirtualRepeatContainer">VirtualRepeat</a>
directive for displaying the results inside of the dropdown.<br/></p>
<blockquote>
<p>When encountering issues regarding the item template please take a look at the
  <a ng-href="api/directive/mdVirtualRepeatContainer">VirtualRepeatContainer</a> documentation.</p>
</blockquote>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <h3 id="basic-example">Basic Example</h3>
<hljs lang="html">
  <md-autocomplete
      md-selected-item="selectedItem"
      md-search-text="searchText"
      md-items="item in getMatches(searchText)"
      md-item-text="item.display">
    <span md-highlight-text="searchText">{{item.display}}</span>
  </md-autocomplete>
</hljs>

<h3 id="example-with-not-found-message">Example with &quot;not found&quot; message</h3>
<hljs lang="html">
<md-autocomplete
    md-selected-item="selectedItem"
    md-search-text="searchText"
    md-items="item in getMatches(searchText)"
    md-item-text="item.display">
  <md-item-template>
    <span md-highlight-text="searchText">{{item.display}}</span>
  </md-item-template>
  <md-not-found>
    No matches found.
  </md-not-found>
</md-autocomplete>
</hljs>

<p>In this example, our code utilizes <code>md-item-template</code> and <code>md-not-found</code> to specify the
    different parts that make up our component.</p>
<h3 id="example-with-validation">Example with validation</h3>
<hljs lang="html">
<form name="autocompleteForm">
  <md-autocomplete
      required
      md-input-name="autocomplete"
      md-selected-item="selectedItem"
      md-search-text="searchText"
      md-items="item in getMatches(searchText)"
      md-item-text="item.display">
    <md-item-template>
      <span md-highlight-text="searchText">{{item.display}}</span>
    </md-item-template>
    <div ng-messages="autocompleteForm.autocomplete.$error">
      <div ng-message="required">This field is required</div>
    </div>
  </md-autocomplete>
</form>
</hljs>

<p>In this example, our code utilizes <code>md-item-template</code> and <code>ng-messages</code> to specify
    input validation for the field.</p>

  
  </section>
  
  <div class="api-param-section">
    <h2>
      
        Attributes
      
    </h2>
    <div class="api-param-table">
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* md-items</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>An expression in the format of <code>item in items</code> to iterate over
    matches for your search.</p>

          
        </td>
      </tr>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
  
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-selected-item-change
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>An expression to be run each time a new item is
    selected</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-search-text-change
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>An expression to be run each time the search text
    updates</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-search-text
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>A model to bind the search query text to</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-selected-item
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-object">object</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-object">object</code></td>
        <td class="description">
          <p>A model to bind the selected item to</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-item-text
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>An expression that will convert your object to a single string.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          placeholder
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Placeholder text that will be forwarded to the input.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-cache
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>Disables the internal caching that happens in autocomplete</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          ng-disabled
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>Determines whether or not to disable the input field</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-require-match
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When set to true, the autocomplete will add a validator,
    which will evaluate to false, when no item is currently selected.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-min-length
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>Specifies the minimum length of text before autocomplete will
    make suggestions</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-delay
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>Specifies the amount of time (in milliseconds) to wait before looking
    for results</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-autofocus
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>If true, the autocomplete will be automatically focused when a <code>$mdDialog</code>,
    <code>$mdBottomsheet</code> or <code>$mdSidenav</code>, which contains the autocomplete, is opening. <br/><br/>
    Also the autocomplete will immediately focus the input element.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-asterisk
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When present, asterisk will not be appended to the floating label</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-autoselect
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>If set to true, the first item will be automatically selected
    in the dropdown upon open.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-menu-class
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>This will be applied to the dropdown menu for styling</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-floating-label
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>This will add a floating label to autocomplete and wrap it in
    <code>md-input-container</code></p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-input-name
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>The name attribute given to the input element to be used with
    FormController</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-select-on-focus
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>When present the inputs text will be automatically selected
    on focus.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-input-id
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>An ID to be added to the input element</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-input-minlength
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>The minimum length for the input&#39;s value for validation</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-input-maxlength
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-number">number</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-number">number</code></td>
        <td class="description">
          <p>The maximum length for the input&#39;s value for validation</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-select-on-match
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When set, autocomplete will automatically select exact
    the item if the search text is an exact match. <br/><br/>
    Exact match means that there is only one match showing up.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-match-case-insensitive
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>When set and using <code>md-select-on-match</code>, autocomplete
    will select on case-insensitive match</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-escape-options
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Override escape key logic. Default is <code>blur clear</code>.<br/>
    Options: <code>blur | clear</code>, <code>none</code></p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-dropdown-items
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Specifies the maximum amount of items to be shown in
    the dropdown.<br/><br/>
    When the dropdown doesn&#39;t fit into the viewport, the dropdown will shrink
    as less as possible.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

    </div>
  </div>
  


  
</div>


</div>
